<template>
  <view class="user-about">
    <view style="background-color: #ffffff;padding: 0 30rpx">
      <view class="logo">
        <img src="https://img.qumoyugo.com/webimgbg/pet-logo-v1.2.png" class="img">
        <view>版本v{{version }}</view>
      </view>
      <view class="list-box">
        <view class="item">
          <img class="img" src="https://img.qumoyugo.com/webimgbg/pet-icon-weixin-cl.png">
          <view style="flex:1;padding-left: 20rpx">官方微信</view>
          <view class="right u-center" @click="copy">
            <view>品客聚精彩</view>
            <uni-icons type="right" size="18" color="#999999"></uni-icons>
          </view>
        </view>
        <view class="item">
          <img class="img" src="https://img.qumoyugo.com/webimgbg/pet-icon-douyin-cl.png">
          <view style="flex:1;padding-left: 20rpx">官方抖音</view>
          <view class="right u-center" @click="copy">
            <view>品客聚精彩</view>
            <uni-icons type="right" size="18" color="#999999"></uni-icons>
          </view>
        </view>
        <view class="item">
          <img class="img" src="https://img.qumoyugo.com/webimgbg/pet-icon-video-cl.png">
          <view style="flex:1;padding-left: 20rpx">视频号</view>
          <view class="right u-center" @click="copy">
            <view>品客聚精彩</view>
            <uni-icons type="right" size="18" color="#999999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const version = ref(wx.getAccountInfoSync().miniProgram.version || '1.1.0')
const copy = () => {
  wx.setClipboardData({
    data: '品客聚精彩',
    success (res) {
      uni.showToast({
        title: '复制成功',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped lang="scss">
.user-about{
  height: 100vh;
  padding-top: 72rpx;
  background: #F9F9F9;
  .logo{
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    font-weight: bold;
    background-color: #ffffff;
    text-align: center;
    .img {
      width: 136rpx;
      height: 136rpx;
      margin-top: 16rpx;
    }
  }
  .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    color: #333333;
    border-bottom: 1rpx solid #F0F0F0;
    padding: 40rpx 0;
    .img{
      width: 44rpx;
      height: 38rpx;
    }
    .right{
      color: #999999;
    }
  }
}
</style>
